import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal, Button, Slider } from 'antd-mobile'
import IconVolume from '../images/volume_mid.png';

const grey = "#424242"

// 设备最大音量调整
class VolumAdjust extends Component {
    constructor(props, context) {
        super(props, context);
        let volume = this.props.volume
        if(volume === undefined || volume === null){
            volume = 100
        }
        this.complete = this.complete.bind(this)
        this.dismiss = this.dismiss.bind(this)
        this.state = {
            volume: volume
        }
    }

    onChange(value) {
        this.setState({
            volume: value,
        });
    }

    dismiss() {
        this.props.volumAction()
    }

    complete() {
        let volume = this.state.volume
        this.props.volumAction({ volume })
    }

    render() {
        return (
            <Modal
                popup
                visible
                onClose={this.dismiss}
                animationType="slide-up"
            >
                <div style={{ width: '100%', marginTop: 16, display: "flex", alignItems: "center", justifyContent: 'center' }}>
                    <p style={{ fontSize: '17px', color: grey }}>调整音量</p>
                </div>
                <div style={{ display: "flex", width: '100%', alignItems: "center", justifyContent: 'center', marginTop: 26, marginBottom: 26 }}>
                    <img src={IconVolume} style={styles.icon} alt='' />
                    <Slider
                        style={styles.slider}
                        value={this.state.volume}
                        min={0}
                        max={100}
                        onChange={value => this.onChange(value)}
                        trackStyle={{
                            height: '5px',
                        }}
                        railStyle={{
                            height: '5px',
                        }}
                    />
                    <p style={{ color: grey, width: itemWidth * 2 }}>{this.state.volume + "%"}</p>
                </div>
                <div style={{ display: "flex", alignItems: "center", justifyContent: 'center' }}>
                    <Button type="primary" style={{ width: '70%', marginTop: 16, marginBottom: 26 }} onClick={this.complete}>完成</Button>
                </div>
            </Modal>
        );
    }
}

VolumAdjust.propTypes = {
    volume: PropTypes.number.isRequired,
    volumAction: PropTypes.func.isRequired,
};

export default VolumAdjust

const itemWidth = 30
const styles = {
    icon: { width: itemWidth, height: itemWidth, marginLeft: itemWidth },
    slider: { width: document.documentElement.clientWidth - itemWidth * 4 - 40, marginLeft: 15, marginRight: 15, height: 3 }
}